<template>
	<view class="jxc">
		<view class="flex justify-evenly align-center today-result ">
			<view class="item">
				<view class="value">2</view>
				<view class="label">今日订单数</view>
			</view>
			<view class="center-line"></view>
			<view class="item">
				<view class="value">282</view>
				<view class="label">今日销售额(元)</view>
			</view>
		</view>
		<view class="m-3 compony-menus">
			<u-grid @click="handleMenuClick" :border="false" col="3">
				<u-grid-item v-for="(listItem,listIndex) in menulist" :key="listIndex">
					<u--image :showLoading="true" :src="listItem.iconImg" width="34px" height="34px" @click="click">
					</u--image>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menulist: [{
						iconImg: '/static/jxc/saleReview.png',
						page: '/page/JXC/saleReview/saleReview',
						title: '销售统计'
					},
					{
						iconImg: '/static/jxc/buyReview.png',
						page: '/page/JXC/buyReview/buyReview',
						title: '采购统计'
					}, {
						iconImg: '/static/jxc/profitReview.png',
						page: '/page/JXC/profitReview/profitReview',
						title: '毛利统计'
					}, {
						iconImg: '/static/jxc/profitReview.png',
						page: '/page/JXC/storeReview/storeReview',
						title: '库存统计'
					}, {
						iconImg: '/static/jxc/stockSearch.png',
						page: '/page/JXC/stockSearch/stockSearch',
						title: '库存查询'
					}, {
						iconImg: '/static/jxc/receivables.png',
						page: '/page/JXC/receivables/receivables',
						title: '应收'
					},{
						iconImg: '/static/jxc/payables.png',
						page: '/page/JXC/payables/payables',
						title: '应付'
					},
				],
			};
		},
		onLoad(){
			
		},
		methods: {
			handleMenuClick(idx) {
				console.log('handleMenuClick', idx)
			},
		}
	}
</script>

<style lang="scss">
	.jxc {
		background-color: #F8FAF9;

		.today-result {
			width: 750rpx;
			height: 320rpx;
			background: $s-manager-color;

			.center-line {
				background-color: #fff;
				width: 2rpx;
				height: 120rpx;

			}

			.item {
				width: calc(50% - 1rpx);
				color: #fff;
				text-align: center;

				.value {
					font-size: 48rpx;

				}

				.label {
					font-size: 28rpx;
				}
			}
		}

		.compony-menus {
			background-color: #fff;
			box-shadow: $s-bg-shadow;
			border-radius: $s-border-radius;
			padding: 32rpx;

			.grid-text {
				font-size: 14px;
				color: #909399;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
		}
	}
</style>
